<template>
    <div class="contant_box">
      <div class="pdf_box">
        <el-button style="position: absolute;top: -50px;left: 0;" type="primary" @click="printPdf()">{{$t('common.pdf_download')}}</el-button>
          <div>
              <div class="pdfBox" v-for="(item, k) in miandanDate" :key="k">
                  <img class="logo" src="../assets/img/CDEK_logo.png" alt="" />
                  <barcode class="codeTop" :value="item.dispatch_number+''" :options="{ height: 55, fontOptions: 'bold' }" format="CODE128"></barcode>
                  <barcode class="codeLeft" :value="item.dispatch_number+''" :options="{ displayValue: false, height: 55 }" format="CODE128"></barcode>
                  <div class="text_box borderL borderT">
                      <div style="height: 105px; padding: 5px">
                          <div>ПОЛУЧАТЕЛЬ</div>
                          <div>ФИО: {{item.pickup_name}}</div>
                          <div>Телефон: {{item.pickup_tel.replace(/(\d{2})\d*(\d{4})/, '$1*****$2')}}</div>
                          <div>Адрес: {{item.pickup_addr}}</div>
                      </div>
                      <div style="height: 50px; padding: 5px;font-size:22px;" class="borderT">
                          <div>№ упаковки: </div>
                          <div>{{item.package_sn}}</div>
                      </div>
                  </div>
                  <div class="bottom_box borderT">
                      <div style="padding:10px" class="bottom_box_left">
                          <div>Мест: {{item.goods_num}}шт.</div>
                          <div>Вес: {{item.gross_weight}}кг.</div>
                      </div>
                      <div class="bottom_box_right borderL">
                          <div><img src="../assets/img/CDEK_M.png" alt="" /></div>
                          <div class="borderT"><img src="../assets/img/CDEK_phone.png" alt="" /></div>
                      </div>
                  </div>
              </div>
          </div>
          <div id="waybillPrintingDom">
              <div class="pdfBox" v-for="(item, k) in miandanDate" :key="k">
                  <img class="logo" src="../assets/img/CDEK_logo.png" alt="" />
                  <barcode class="codeTop" :value="item.dispatch_number+''" :options="{ height: 55, fontOptions: 'bold' }" format="CODE128"></barcode>
                  <barcode class="codeLeft" :value="item.dispatch_number+''" :options="{ displayValue: false, height: 55 }" format="CODE128"></barcode>
                  <div class="text_box borderL borderT">
                      <div style="height: 105px; padding: 5px">
                          <div>ПОЛУЧАТЕЛЬ</div>
                          <div>ФИО: {{item.pickup_name}}</div>
                          <div>Телефон: {{item.pickup_tel.replace(/(\d{2})\d*(\d{4})/, '$1*****$2')}}</div>
                          <div>Адрес: {{item.pickup_addr}}</div>
                      </div>
                      <div style="height: 50px;padding: 0px 5px 5px 5px;font-size: 22px;line-height: 28px;" class="borderT">
                          <div>№ упаковки: </div>
                          <div>{{item.package_sn}}</div>
                      </div>
                  </div>
                  <div class="bottom_box borderT">
                      <div style="padding:10px" class="bottom_box_left">
                          <div>Мест: {{item.goods_num}}шт.</div>
                          <div>Вес: {{item.gross_weight}}кг.</div>
                      </div>
                      <div class="bottom_box_right borderL">
                          <div><img src="../assets/img/CDEK_M.png" alt="" /></div>
                          <div class="borderT"><img src="../assets/img/CDEK_phone.png" alt="" /></div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
</template>

<script>
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
export default {
    data() {
        return {
            miandanDate: [1]
        };
    },

    mounted() {},
    beforeMount() {
      //this.$route.query.data接收路由跳转传参
      let obj=JSON.parse(this.$route.query.data)
      this.miandanDate=obj
      // this.$nextTick(()=>{
      //   this.printPdf()   
      // })   
    },
    methods: {
      printPdf() {
        let that=this
          html2Canvas(document.querySelector('#waybillPrintingDom'), {
              allowTaint: true
          }).then(function (canvas) {
              // eslint-disable-next-line new-cap
              const pdf = new JsPDF('p', 'pt', [1500, 1500]); // A4纸，纵向

              const ctx = canvas.getContext('2d');
              const a4w = 1432;
              const a4h = 1432; // A4大小，210mm x 297mm，四边各保留210mm的边距，显示区域190x277
              const imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
              let renderedHeight = 0;

              for (var i = 0; i < that.miandanDate.length; i++) {
                  const page = document.createElement('canvas');
                  page.style.backgroundColor = 'red';
                  page.width = canvas.width;
                  page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能内容不足一页
                  console.log(page)
                  page.getContext('2d').fillStyle = 'white';
                  if (i == 0) {
                      // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
                      page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, 1200), 0, 0);
                  } else {
                      // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
                      page.getContext('2d').putImageData(ctx.getImageData(0, i * 1200, canvas.width, 1200), 0, 0);
                      pdf.addPage(); // 如果后面还有内容，添加一个空页
                  }
                  pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 3, 3, a4w, a4h); // 添加图像到页面，保留10mm边距
              }
              const totalPages = pdf.internal.getNumberOfPages(); // 获取当前pdf的页数
              for (let i = 1; i <= totalPages; i++) {
                  pdf.setPage(i); // 通过循环，跳转至相应的页进行设置
                  // 后面可以进行相应的数据写入操作了，例如以下的添加水印操作
                  pdf.setTextColor(150);
                  // pdf.text(X坐标, Y坐标, 文字内容)
                  pdf.setFontSize(1);
                  pdf.text(pdf.internal.pageSize.width / 2, pdf.internal.pageSize.height - 1, String(i));
              }
              pdf.save('CDEK.pdf');
              //关闭当前页面
              // window.setTimeout(()=>{
              //   window.close(); 
              // },1)
          });
      }
    }
};
</script>
<style lang="less" scoped>
.contant_box{
  background-color: #fff;
  height: 100%;
      width: 100%;
    position: relative;
    overflow-x: hidden;
}
.pdf_box {
    margin-top: 40px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    background-color: #fff;
        font-size: 16px;
    line-height: 20px;
}
.pdfBox {
    position: relative;
    width: 380px;
    height: 380px;
    border: 1px solid #000;
    margin-bottom: 18px;
    .logo {
        width: 130px;
      margin-left: 5px;
      margin-top: 10px;
    }
    .codeTop {
        position: absolute;
        top: 0;
        right: 0;
    }
    .codeLeft {
        position: absolute;
        left: -84px;
        top: 125px;
        transform: rotate(270deg);
    }
    .text_box {
        width: 303px;
        position: absolute;
        right: 0;
        bottom: 100px;
    }
    .bottom_box {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        height: 100px;
        width: 100%;
        .bottom_box_left {
            flex: 1;
            .bottom_box_left_bot {
                display: flex;
            }
        }
        .bottom_box_right {
            display: flex;
            flex-direction: column;
            div {
                width: 50px;
                height: 50px;
                text-align: center;
                line-height: 50px;
            }
        }
    }
    .borderL {
        border-left: 1px solid #000;
    }
    .borderT {
        border-top: 1px solid #000;
    }
}
#waybillPrintingDom{
    transform: scale(3);
    position: absolute;
    left: 1000000px;
}
</style>